<template>
  <div>
    <!-- <div style="display: flex; overflow: auto">
      <div v-for="(itemr, index) in resDate" :key="index">
        <el-button
          v-if="itemr == ks"
          style="margin-left: 10px"
          type="primary"
          @click="a(itemr)"
        >
          {{ itemr }}
        </el-button>

        <el-button v-else style="margin-left: 10px" @click="a(itemr)">
          {{ itemr }}
        </el-button>
      </div>
    </div> -->
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item
        v-for="(items, index) in objs"
        :key="index"
        name="1"
        :title="items.type_name"
      >
        <div v-for="(itemse, k) in items.item" :key="k">
          <div>
            <el-form ref="ruleForm" class="demo-ruleForm" status-icon>
              <el-form-item :label="itemse.item_name" prop="pass">
                <el-input
                  v-if="itemse.data_type == 'input_str_r'"
                  v-model="itemse.default_value"
                  :disabled="true"
                  placeholder="请输入内容"
                />

                <el-input
                  v-if="itemse.data_type == 'input_str_w'"
                  v-model="itemse.default_value"
                  placeholder="请输入内容"
                />
                <el-upload
                  v-if="itemse.data_type == 'input_file'"
                  action="https://devapi.jbkl.com/api/upload_img"
                  class="upload-demo"
                  :limit="3"
                  list-type="picture"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="
                    (res) => {
                      return uploadSuccess(res, itemse)
                    }
                  "
                  :show-file-list="false"
                >
                  <img
                    v-if="itemse.default_value"
                    class="avatar"
                    :src="itemse.default_value"
                    width="100px"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <div v-if="itemse.data_type == 'input_radio'">
                  <el-radio-group v-model="itemse.default_value">
                    <el-radio
                      v-for="(itemsee, j) in itemse.data_value"
                      :key="j"
                      :label="itemsee"
                      :value="itemsee"
                    >
                      {{ itemsee }}
                    </el-radio>
                  </el-radio-group>
                </div>
                <div v-if="itemse.data_type == 'input_select'">
                  <el-select
                    v-model="itemse.default_value"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(itemsee, j) in itemse.data_value"
                      :key="j"
                      :label="itemsee"
                      :value="itemsee"
                    />
                  </el-select>
                </div>
                <el-input-number
                  v-if="itemse.data_type == 'input_num_w'"
                  v-model="itemse.default_value"
                  :precision="2"
                  :step="0.01"
                />
                <el-input
                  v-if="itemse.data_type == 'input_checkbox'"
                  v-model="itemse.default_value"
                  placeholder="请输入内容"
                  :rows="2"
                  type="textarea"
                />

                <el-input
                  v-if="itemse.data_type == 'default_input'"
                  v-model="itemse.default_value"
                  placeholder="请输入内容"
                  :rows="2"
                  type="textarea"
                />
                <!-- pregnancy_complications -->
                <div v-if="itemse.data_type == 'radio_num'">
                  <el-radio-group v-model="itemse.default_value">
                    <el-radio
                      v-for="(itemsee, j) in itemse.input_value"
                      :key="j"
                      :label="itemsee.key"
                      :value="itemsee.value"
                    >
                      {{ itemsee.value }}
                    </el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-collapse
      v-if="type == 'r'"
      v-model="activeNames"
      @change="handleChange"
    >
      <el-collapse-item
        v-for="(items, index) in objs"
        :key="index"
        name="1"
        :title="items.type_name"
      >
        <div v-for="(itemse, k) in items.item" :key="k">
          <div>
            <div style="">
              <el-form ref="ruleForm" class="demo-ruleForm" status-icon>
                <el-form-item :label="itemse.item_name" prop="pass">
                  <div v-if="itemse.data_type == 'input_file'">
                    <el-image
                      v-if="itemse.default_value"
                      :preview-src-list="[itemse.default_value]"
                      :src="itemse.default_value"
                      style="width: 100px; height: 100px"
                    />
                  </div>
                  <div v-else>
                    {{ itemse.default_value }}
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-button
      v-if="type == 'w'"
      style="margin-left: 49%; margin-top: 20px"
      @click="submit"
    >
      保存
    </el-button>
  </div>
</template>

<script>
  import { saveHealthRecord, treatment_records } from '@/api/reservation'

  export default {
    props: {
      seeList: {
        type: Object,
        required: true,
      },
      pdata: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        activeNames: ['1'],
        objs: [],
        resDate: [],
        ks: '',
        template_id: '',
        type: '',
      }
    },
    computed: {
      // opened() {
      //   return this.objs.map((i) => {
      //     console.log(i.type_id)
      //     this.collapse.push(i.type_id)
      //     return i.type_id
      //   })
      // },
    },
    watch: {
      pdata() {
        this.init()
      },
    },
    mounted() {
      this.init()
    },
    beforeMount() {},

    methods: {
      init() {
        treatment_records(this.pdata).then((e) => {
          this.objs = e.data.menu_result.record_result
          this.resDate = e.data.res_date
          this.template_id = e.data.menu_result.template_id
          this.type = e.data.type
        })
        console.log(this.objs)
      },
      a(e) {
        this.ks = e
      },
      submit() {
        const mapObjs = JSON.parse(JSON.stringify(this.objs))
        mapObjs.forEach((e) => {
          delete e.type_name
          e.item.forEach((j) => {
            delete j.data_scope
            delete j.data_unit
            delete j.data_value
            delete j.data_type
          })
        })
        const data = {
          group_id: this.seeList.res_group_id,
          customer_id: this.seeList.res_customer_id,
          member_id: this.seeList.app_customer_id,
          res_id: this.seeList.id,

          // case_group_id: this.seeList.res_group_id,
          case_group_id: this.template_id,

          res_user_id: this.seeList.user_id,
          res_date: this.seeList.res_date,
          item: JSON.stringify(mapObjs),
        }
        saveHealthRecord(data).then(() => {
          this.init()
          this.$message({
            message: '成功',
            type: 'success',
          })
        })
        console.log(data)
      },
      handleRemove(file) {
        console.log(file)
      },
      handlePreview(file) {
        console.log(file)
      },
      uploadSuccess(r, k) {
        k.default_value = r.data
      },
      handleChange() {},
    },
  }
</script>

<style scoped></style>
